<template>
	<view class="project-survey-container">
		<scroll-view class="scroll-view" scroll-y>
			<view class="real-time-statistics-container">
				<image :src="projectSurveyBg" class="real-time-statistics-bg"></image>
				<view class="total-statistics-container">
					<image :src="totalStatisticsBg" class="total-statistics-bg"></image>
					<view class="total-statistics-list">
						<view class="total-statistics-item">
							<text class="total-statistics-num">{{ todaySurvey.all.attendanceCount || 0 }}</text>
							<text class="total-statistics-des">出勤人数</text>
						</view>
						<view class="total-statistics-item">
							<text class="total-statistics-num">{{ todaySurvey.all.onDutyCount || 0 }}</text>
							<text class="total-statistics-des">在岗人数</text>
						</view>
						<view class="total-statistics-item">
							<text class="total-statistics-num">{{ todaySurvey.all.stayingCount || 0 }}</text>
							<text class="total-statistics-des">实时在场</text>
						</view>
					</view>
					<view class="attendance-rate-container">
						<l-circle strokeColor="#fff" trailColor="#7daefb" :current.sync="percent" :percent="handleCompute(todaySurvey.all.attendanceRate)" canvas size="60">
							<text class="attendance-rate">{{ handleCompute(todaySurvey.all.attendanceRate) }}%</text>
						</l-circle>
						<text class="attendance-rate-des">出勤率</text>
					</view>
				</view>
				<view class="person-statistics">
					<view class="person-statistics-detail">
						<image :src="mangerBg" class="person-statistics-bg"></image>
						<text class="person-statistics-title manager-statistics-title">管理人员</text>
						<view class="person-statistics-bg manager-statistics-bg">
							<view class="person-statistics-item" @tap="toAttendanceFlow(0)">
								<text>{{ todaySurvey.manager.attendanceCount || 0 }}</text>
								<view class="person-statistics-des">
									出勤人数
									<text class="attendance-right-arrow"></text>
								</view>
							</view>
							<view class="person-statistics-item">
								<text>{{ todaySurvey.manager.onDutyCount || 0 }}</text>
								<text class="person-statistics-des">在岗人数</text>
							</view>
							<view class="person-statistics-item">
								<text>{{ todaySurvey.manager.stayingCount || 0 }}</text>
								<text class="person-statistics-des">实时在场</text>
							</view>
						</view>
					</view>
					<view class="person-statistics-detail">
						<image :src="builderBg" class="person-statistics-bg"></image>
						<text class="person-statistics-title builder-statistics-title">建筑人员</text>
						<view class="person-statistics-bg builder-statistics-bg">
							<view class="person-statistics-item" @tap="toAttendanceFlow(2)">
								<text>{{ todaySurvey.builder.attendanceCount || 0 }}</text>
								<view class="person-statistics-des">
									出勤人数
									<text class="attendance-right-arrow"></text>
								</view>
							</view>
							<view class="person-statistics-item">
								<text>{{ todaySurvey.builder.onDutyCount || 0 }}</text>
								<text class="person-statistics-des">在岗人数</text>
							</view>
							<view class="person-statistics-item">
								<text>{{ todaySurvey.builder.stayingCount || 0 }}</text>
								<text class="person-statistics-des">实时在场</text>
							</view>
						</view>
					</view>
				</view>
				<view class="warning-data-container">
					<scroll-view
						scroll-x
						enable-flex
						:scroll-into-view="scrollId"
						scroll-with-animation
						enable-passive
						enhanced
						:bounces="false"
						:show-scrollbar="false"
						fast-deceleration
						class="scroll-view-x"
					>
						<view class="warning-data-list">
							<view class="warning-data-item" data-index="{{1}}" id="warningData1" @tap="toWaningDetail('identityNumberExpired')">
								<text>{{ warning.identityNumberExpiredCount || 0 }}</text>
								<view class="warning-data-des">
									证件过期
									<text class="warning-data-right-arrow"></text>
								</view>
							</view>
							<view class="warning-data-item" data-index="{{2}}" id="warningData2" @tap="toWaningDetail('elderAge')">
								<text>{{ warning.elderCount || 0 }}</text>
								<view class="warning-data-des">
									大龄人员
									<text class="warning-data-right-arrow"></text>
								</view>
							</view>
							<view class="warning-data-item" data-index="{{3}}" id="warningData3" @tap="toWaningDetail('overAge')">
								<text>{{ warning.overAgeCount || 0 }}</text>
								<view class="warning-data-des">
									超龄人员
									<text class="warning-data-right-arrow"></text>
								</view>
							</view>
							<view class="warning-data-item" data-index="{{4}}" id="warningData4" @tap="toWaningDetail('certificateExpire')">
								<text>{{ warning.certificateExpireCount || 0 }}</text>
								<view class="warning-data-des">
									证书过期
									<text class="warning-data-right-arrow"></text>
								</view>
							</view>
							<view class="warning-data-item" data-index="{{5}}" id="warningData5" @tap="toWaningDetail('noAttendanceRecordForStay')">
								<text>{{ warning.consecutiveAbsenteeismForStaying?.isOpen ? warning.consecutiveAbsenteeismForStaying?.count || 0 : '-' }}</text>
								<view class="warning-data-des">
									{{ warning.consecutiveAbsenteeismForStaying?.isOpen ? `在岗人员连续${warning.consecutiveAbsenteeismForStaying?.days}天未出勤` : `连续未出勤` }}
									<text class="warning-data-right-arrow"></text>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="right-arrow-container" @tap="scrollRight">
						<text class="right-arrow"></text>
					</view>
				</view>
			</view>
			<view class="tab-list">
				<u-subsection :list="list" :current="current" mode="subsection" inactiveColor="#0071F7" @change="changeSubsection"></u-subsection>
			</view>
			<statistics v-show="current == 0" :current="current" :projectUuid="projectUuid"></statistics>
			<companyList v-show="current == 1" :current="current" :projectUuid="projectUuid"></companyList>
			<workTypeList v-show="current == 2" :current="current" :projectUuid="projectUuid"></workTypeList>
		</scroll-view>
	</view>
</template>

<script>
import { common } from '@/pagesA/utils/common.js';
// import projectSurveyBg from '@/pagesA/assets/image/project-survey-bg.png';
// import totalStatisticsBg from '@/pagesA/assets/image/total-statistics-bg.png';
// import mangerBg from '@/pagesA/assets/image/manger-bg.png';
// import builderBg from '@/pagesA/assets/image/builder-bg.png';
import statistics from '@/pagesA/pages/projectSurvey/statistics.vue';
import companyList from '@/pagesA/pages/projectSurvey/companyList.vue';
import workTypeList from '@/pagesA/pages/projectSurvey/workTypeList.vue';
const app = getApp();
export default {
	components: {
		statistics,
		companyList,
		workTypeList
	},
	data() {
		return {
			todaySurvey: {
				all: {},
				manager: {},
				builder: {}
			},
			warning: {},
			projectSurveyBg: common.imgs.projectSurveyBg,
			totalStatisticsBg: common.imgs.totalStatisticsBg,
			mangerBg: common.imgs.mangerBg,
			builderBg: common.imgs.builderBg,
			percent: 0,
			scrollId: '',
			list: ['统计', '参建单位', '工种'],
			current: '',
			projectUuid: ''
		};
	},
	onLoad(options) {
		common.init();
		this.projectUuid = !options.projectUuid || options.projectUuid == 'undefined' || options.projectUuid == 'null' ? '' : options.projectUuid;
		this.current = 0;
		this.getRealTimeAll(this.projectUuid);
	},
	methods: {
		getRealTimeAll(projectUuid) {
			//获取汇总统计数据
			let params = {
				projectUuid: projectUuid
			};
			!projectUuid && delete params.projectUuid;
			common.apis.projectSurvey.realTimeAll(params).then((res) => {
				this.todaySurvey.all = res.data?.all || {};
				this.todaySurvey.builder = res.data?.builder || {};
				this.todaySurvey.manager = res.data?.manager || {};
				this.warning = res.data?.warning || {};
			});
		},
		handleCompute(value) {
			return value ? Number(value * 100).toFixed(1) : 0;
		},
		scrollRight() {
			this.scrollId = '';
			this.$nextTick(() => {
				this.scrollId = 'warningData5';
			});
		},
		changeSubsection(index) {
			this.current = index;
		},
		toAttendanceFlow(index) {
			uni.navigateTo({
				url: `/pagesA/pages/projectSurvey/attendanceFlow?index=${index}&projectUuid=${this.projectUuid}`
			});
		},
		toWaningDetail(code) {
			if (this.warning.consecutiveAbsenteeismForStaying?.isOpen) {
				app.globalData.consecutiveAbsenteeismForStayingDays = this.warning.consecutiveAbsenteeismForStaying?.days;
			}
			uni.navigateTo({
				url: `/pagesA/pages/projectSurvey/warningDetail?code=${code}&projectUuid=${this.projectUuid}`
			});
		}
	}
};
</script>

<style>
.project-survey-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f6f7fa;
}
.scroll-view {
	flex: 1;
	height: 0;
}
.real-time-statistics-container {
	height: 504rpx;
	padding: 24rpx 24rpx 0;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}
.real-time-statistics-bg,
.total-statistics-bg,
.person-statistics-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.total-statistics-container {
	position: relative;
	height: 182rpx;
	display: flex;
	align-items: center;
}
.total-statistics-list {
	z-index: 2;
	display: flex;
	flex: 1;
	height: 120rpx;
	position: relative;
	top: 14rpx;
	margin-right: 20rpx;
}
.total-statistics-list .total-statistics-item {
	width: calc(100% / 3);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.total-statistics-item .total-statistics-num {
	font-size: 42rpx;
	font-family: Roboto-Bold, Roboto;
	font-weight: bold;
	color: #ffffff;
}
.total-statistics-item .total-statistics-des {
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
}
.attendance-rate-container {
	z-index: 2;
	margin-left: auto;
	height: 160rpx;
	margin-right: 40rpx;
	position: relative;
}
.attendance-rate {
	font-size: 28rpx;
	font-family: Roboto-Bold, Roboto;
	font-weight: bold;
	color: #ffffff;
}
.attendance-rate-des {
	position: absolute;
	left: 18rpx;
	bottom: 0rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
}
.person-statistics {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 24px;
	z-index: 2;
}
.person-statistics-detail {
	z-index: 2;
	position: relative;
	flex: 1;
	height: 160rpx;
}
.person-statistics-bg {
	top: 44rpx;
}
.person-statistics-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 128rpx;
	height: 44rpx;
	border-radius: 8rpx 8rpx 0 0;
	font-size: 24rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
.manager-statistics-title {
	background: #ff943d;
}
.builder-statistics-title {
	background: #12c361;
}
.person-statistics-bg {
	width: 339rpx;
	height: 126rpx;
	font-size: 36rpx;
	font-family: Roboto-Bold, Roboto;
	font-weight: bold;
	color: #ffffff;
	display: flex;
	align-items: center;
	word-break: break-all;
}
.person-statistics-item {
	width: calc(100% / 3);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.person-statistics-des {
	display: flex;
	align-items: center;
	font-size: 20rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	padding-top: 4px;
}
.attendance-right-arrow {
	width: 10rpx;
	height: 10rpx;
	border-right: 2rpx solid #fff;
	border-bottom: 2rpx solid #fff;
	transform: rotate(-45deg);
	position: relative;
	left: 4rpx;
}
.warning-data-container {
	z-index: 2;
	height: 142rpx;
	background: #ffffff;
	position: relative;
	margin-top: 32rpx;
	border-radius: 16rpx;
	padding: 0 64rpx 0 32rpx;
}
.scroll-view-x {
	z-index: 2;
	height: 142rpx;
	background: #ffffff;
	display: flex;
	position: relative;
}
.right-arrow-container {
	position: absolute;
	right: 0;
	top: 0;
	width: 50rpx;
	height: 95%;
	background-color: #fff;
	box-shadow: -8px 0px 12px 0rpx rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 16rpx 16rpx 0;
	z-index: 3;
}

.right-arrow-container .right-arrow {
	width: 15rpx;
	height: 15rpx;
	border-top: 4rpx solid #949dbe;
	border-right: 4rpx solid #949dbe;
	transform: rotate(45deg);
	border-radius: 4rpx;
}
.warning-data-list {
	display: flex;
}
.warning-data-item {
	flex-shrink: 0;
	font-size: 42rpx;
	font-family: Roboto-Bold, Roboto;
	font-weight: bold;
	color: #1e253f;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-right: 32rpx;
}
.warning-data-des {
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1e253f;
	padding-top: 8rpx;
	display: flex;
	align-items: center;
}
.warning-data-right-arrow {
	flex-shrink: 0;
	width: 12rpx;
	height: 12rpx;
	border-right: 2rpx solid #a7aab4;
	border-bottom: 2rpx solid #a7aab4;
	transform: rotate(-45deg);
	margin-left: 4rpx;
}
.tab-list {
	margin: 120rpx 32rpx 32rpx;
}
</style>
